<template>
  <views class="recharge_catalogue">
    <viewTitle :title="'充值录单'" :border="false"></viewTitle>
    <div class="search_input">
      <div class="search_input_flex flex flexR">
        <div class="search_input_flex_item flex flexR center">
          <div class="input-title ">选择客户:</div>
          <el-select v-model="form.enterprise_id" @change="getBank" clearable placeholder="全部">
            <el-option
              v-for="item in enterprise_list"
              :key="item.enterprise_id"
              :label="item.enterprise_name"
              :value="item.enterprise_id"
            ></el-option>
          </el-select>
        </div>
        <div class="search_input_flex_item flex flexR center">
          <div class="input-title ">选择客户银行:</div>
          <el-select
            v-model="form.enterprise_bank_id"
            @change="selectBank"
            clearable
            placeholder="全部"
          >
            <el-option
              v-for="item in bank_list"
              :key="item.enterprise_bank_id"
              :label="item.bank_name"
              :value="item.enterprise_bank_id"
            ></el-option>
          </el-select>
        </div>
      </div>

      <div class="search_input_flex flex flexR">
        <div class="search_input_flex_item flex flexR center">
          <div class="input-title ">银行流水号:</div>
          <el-input v-model="form.pay_sn" placeholder="请输入银行流水号" :clearable="true"></el-input>
        </div>
        <div class="search_input_flex_item flex flexR center">
          <div class="input-title ">开户名称:</div>
          <el-input v-model="bank_info.bank_account_name" placeholder :disabled="true"></el-input>
        </div>
      </div>

      <div class="search_input_flex flex flexR">
        <div class="search_input_flex_item flex flexR center">
          <div class="input-title ">银行账户:</div>
          <el-input v-model="bank_info.bank_sn" placeholder :disabled="true"></el-input>
        </div>
        <div class="search_input_flex_item flex flexR center">
          <div class="input-title ">银行名称:</div>
          <el-input v-model="bank_info.bank_name" placeholder :disabled="true"></el-input>
        </div>
      </div>

      <div class="search_input_flex flex flexR">
        <div class="search_input_flex_item flex flexR center">
          <div class="input-title ">充值金额:</div>
          <el-input v-model="form.plat_money" placeholder="请输入充值金额" :clearable="true"></el-input>
        </div>
        <div class="search_input_flex_item flex flexR center">
          <div class="input-title ">充值时间:</div>
          <el-date-picker
            v-model="form.pay_time"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
            ref="pay_time"
          ></el-date-picker>

        </div>
      </div>

      <div class="search_input_flex flex flexR">
        <div class="search_input_flex_item flex flexR center">
          <div class="input-title">充值类型:</div>
          <div class="input-title-type">
            <el-radio-group v-model="form.recharge_type" @change="selectBank">
              <el-radio label="0">充值</el-radio>
              <el-radio label="1">退款</el-radio>
            </el-radio-group>
          </div>
        </div>

        <div v-if="form.recharge_type == 1" class="search_input_flex_item flex flexR center">
          <div class="input-title">输入税率:</div>
          <el-select v-model="form.process_rate" filterable allow-create default-first-option clearable placeholder="请选择或输入税率">
              <!--<el-option v-for="item in process_rate"    :value="item.process_rate">-->
              <!--<span style="float: left">{{ item.process_rate }}</span>-->
              <!--</el-option>-->
            <el-option
                    v-for="item in process_rate"
                    :key="item.process_rate"
                    :value="item.process_rate"
            ></el-option>
          </el-select>
        </div>
        
      </div>

      <div class="search_input_flex flex flexR">
        <div class="search_input_flex_item search_input_flex_items flex flexR center">
          <div class="input-title ">充值备注:</div>
          <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            maxlength="100"
            show-word-limit
            v-model="form.remark"
          ></el-input>
        </div>
        <div class="search_input_flex_item flex flexR center"></div>
      </div>

      <!-- 提交/取消 -->
      <div class="btn_submit flex flexR">
        <el-button type="primary" @click="enteringCharge">提交</el-button>
        <el-button @click="prev_cancel">取消</el-button>
      </div>
    </div>
  </views>
</template>

<script>
export default {
  data() {
    return {
      form: {
        enterprise_id: "", // 客户ID
        enterprise_bank_id: "", // 银行ID
        pay_sn: "", // 银行流水
        pay_time: "", // 充值时间
        plat_money: "", // 充值备注
        recharge_type:"0",
        process_rate:0,
        remark: "" // 充值备注
      },
      process_rate:[],
      enterprise_list: [],
      bank_list: [],
      bank_info: {
        bank_sn: "",
        bank_account_name: "",
        bank_name: ""
      },
      current_path:'',        //当前路由
    };
  },
  methods: {
    prev_cancel() {
      this.$blackRoute({ path: "/recharge_management", query: {}, that: this }); // 返回指定路由-删除标题栏
    },
    getData() {
      let { code, msg, data } = this.$api.sendSync(
        this.$mapapi.fgetAllEnterprise,
        {}
      );
      if (code != 200 && code != 501) {
        this.$message.error(msg);
        this.enterprise_list = [];
        return;
      }
      this.enterprise_list = data || [];
      this.form.enterprise_id = data[0].enterprise_id;
      this.getBank();
    },
    getBank() {
      let { code, msg, data } = this.$api.sendSync(
        this.$mapapi.fgetEnterpriseBank,
        {
          enterprise_id: this.form.enterprise_id
        }
      );
      if (code != 200 && code != 501) {
        this.$message.error(msg);
        this.bank_list = [];
        return;
      }
      this.bank_list = data;
      if (this.bank_list.length) {
        for (let v of this.bank_list) {
          this.form.enterprise_bank_id = v.enterprise_bank_id;
          if (v.is_default) {
            break;
          }
        }
      } else {
        this.form.enterprise_bank_id = "";
      }
      this.selectBank();
    },
    selectBank() {
      this.bank_info = {};
      if (this.form.enterprise_bank_id != "" && this.bank_list.length) {
        for (let vv of this.bank_list) {
          if (vv.enterprise_bank_id == this.form.enterprise_bank_id) {
            this.bank_info.bank_sn = vv.bank_sn;
            this.bank_info.bank_account_name = vv.bank_account_name;
            this.bank_info.bank_name = vv.bank_name;
            break;
          }
        }

        //获取企业往期的充值税率
          let { code, msg ,data} = this.$api.sendSync(
              this.$mapapi.fgetPastRate,
              {
                  enterprise_id:this.form.enterprise_id,
                  bank_code:this.bank_info.bank_sn ,
              }
          )
          if (code != 200 ) {
              this.$message.error(msg);
              return;
          }else {
              this.process_rate = data;
          }
      }
    },
    enteringCharge() {

      if (this.bank_info.bank_sn) {
        if (this.form.pay_time == "") {
          //充值时间不能为空
          this.$message.error("充值时间不能为空");
          this.$refs.pay_time.focus();
          return;
        }
        this.form.pay_time = this.form.pay_time.indexOf("+")
          ? this.form.pay_time.split("+")[0]
          : "";
        let {...params} = this.form;
        params.pay_time = new Date(params.pay_time).getTime() / 1000;
        console.log(this.form,params);
        let { code, msg } = this.$api.sendSync(
            this.$mapapi.fenteringCharge,
            params
          ),
          that = this;
        if (code != 200 && code != 501) {
          this.$message.error(msg);
          return;
        } else {
          this.$message.success(msg);
          setTimeout(function() {
            that.$blackRoute({
              path: "/my_account/my_account_detail",
              query: { types: 0 },
              that: this
            }); // 返回指定路由-删除标题栏
          }, 500);
        }
      } else {
        this.$message.error("企业银行账户不存在-请联系该企业");
      }
    }
  },
  created() {},
  mounted() {
    this.$setRouteTitle();
    this.getData();
    this.current_path = this.$route.path;
  },
  computed: {
    getNavList() {
      return this.$store.getters.getNavList;
    }
  },
  activated() {
    let flag = false;
    for (let val of this.getNavList) {
      if (val.path == this.current_path) {
        flag = true;
      }
    }
    if (!flag) {
      this.$setRouteTitle();
    }
  },
  deactivated() {
    let flag = false; //是否保留数据
    for (let val of this.getNavList) {
      if (val.path == this.current_path) {
        flag = true;
      }
    }
    if (!flag) {
      this.form={
        enterprise_id: "", // 客户ID
        enterprise_bank_id: "", // 银行ID
        pay_sn: "", // 银行流水
        pay_time: "", // 充值时间
        plat_money: "", // 充值备注
        remark: "" // 充值备注
      }
    }
  }
};
</script>

<style lang="less" :scope="true"  src="@/style/account/recharge_catalogue.less">
</style>
